
const ctx = wx.createCanvasContext("canvasI"); //创建id为canvasI的绘图
const ctx2 = wx.createCanvasContext("bgCanvas");//创建id为bgCanvas的背景绘图
var mytime;//跑马灯定时器名称
var lamp = 0; //判断跑马灯闪烁标记
var w2 = "";
var h2 = "";
var w1 = ""; 
var h1 = "";
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nophone:false,
    itemsArc: 0,//根据text平分的角度
    color: ["#ffab0a", "#ffda91"],//抽奖面板上间隔分布的色彩
    text: ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "六等奖", "七等奖", "八等奖"],//面板文字
    isRotate: 0,//停止的地方,对应text的索引
    deg:'',//旋转至的角度
    list:[
      
    ],
    lotteryAnimation: {},
    canvasImg:'',
    canvasImgShow:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  getPhoneNumber: function (e) {
    var that = this;
    var iv = e.detail.iv
    var encryptedData = encodeURIComponent(e.detail.encryptedData)
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
      
    } else {
      wx.request({
        url: app.siteInfo.siteroot + 'getPhoneNumber',
        method: "get",
        data: {
          encryptedData: encryptedData,
          iv: iv,
          sessionkey: app.siteInfo.sessionkey,
          uid: app.siteInfo.uid,
          pid: app.siteInfo.pid
        },
        success: function (res) {
          that.setData({
            nophone: false,
          })
        }
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;
    wx.request({
      url: app.siteInfo.scoreroot + 'zhuanpan',
      method: "post",
      data: {
        uid: app.siteInfo.uid,
        pid: app.siteInfo.pid,
        com_part_id: app.siteInfo.com_part_id,
      },
      success: function (res) {
        if(res.data.code == 201) {
          that.setData({
            nophone: true,
          })
        }
        that.setData({
          text: res.data.text,
          list: res.data.list,
          sets: res.data.sets,
        })
        //获取大转盘每等分的角度。
        let itemsArc = 360 / res.data.text.length;

        that.setData({
          itemsArc
        }, function () {
          wx.createSelectorQuery().select('#canvas-one').boundingClientRect(function (rect) {
            w1 = parseInt(rect.width / 2);
            h1 = parseInt(rect.height / 2);
            that.Items(itemsArc);  //绘制转盘。 
          }).exec(function(){
            // setTimeout(function () {
            //   wx.canvasToTempFilePath({
            //     x: 0,
            //     y: 0,
            //     width: w1 * 2,
            //     height: h1 * 2,
            //     destWidth: 500,
            //     destHeight: 500,
            //     canvasId: 'canvasI',
            //     success(res) {
            //       console.log('success')
            //       that.setData({
            //         canvasImg: res.tempFilePath,
            //         canvasImgShow: true,
            //       })
            //     },
            //   })
            // }, 100)
          })
          // mytime = setInterval(that.light, 1000);//启动跑马灯定时器。
        })

        //监听canvas的宽高
        wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {
          //获取canvas宽度的一半；
          w2 = parseInt(rect.width / 2);
          //获取canvas高度的一半
          h2 = parseInt(rect.height / 2);
          that.light();
        }).exec()
      }
    })
    that.data.timer = setInterval(function(){
      wx.request({
        url: app.siteInfo.scoreroot + 'zhuanpan_user',
        method: "post",
        data: {
          uid: app.siteInfo.uid,
          pid: app.siteInfo.pid,
          com_part_id: app.siteInfo.com_part_id,
        },
        success: function (res) {
          that.setData({
            list: res.data.list,
          })
        }
      })
    },2000)
    
  },
  start() {
    var that = this;
    that.setData({

    })
    wx.request({
      url: app.siteInfo.scoreroot + 'startzhuan',
      method: "post",
      data: {
        uid: app.siteInfo.uid,
        pid: app.siteInfo.pid,
        com_part_id: app.siteInfo.com_part_id,
      },
      success: function (res) {
        if(res.data.code == 500){
          wx.showToast({
            title: res.data.msg,
            icon:'none'
          })
        } else if (res.data.code == 201){
          that.setData({
            nophone: true,
          })
        }else if(res.data.code == 200){
          // that.setData({
          //   listResult: res.data.list,
          // })
          let itemsArc = that.data.itemsArc;
          var deg = that.data.deg;
          // 指定获奖结果
          let n = res.data.list.index;

          // var circel = Math.floor(deg / 360) * 360
          // n = - n * itemsArc - itemsArc / 2 - 1440 + circel;
          // that.setData({
          //   deg: n,
          // })


          n = - n * itemsArc - itemsArc / 2 - 1440;

          var animation = wx.createAnimation({
            duration: 0,
            transformOrigin: '50% 50% 0',
            timingFunction: 'ease-in-out',
          })
          that.animation = animation
          that.animation.rotate(0).step()
          that.setData({
            lotteryAnimation: animation.export()
          })

          setTimeout(function () {
            var animation = wx.createAnimation({
              duration: 3000,
              transformOrigin: '50% 50% 0',
              timingFunction: 'ease-in-out',
            })
            that.animation = animation
            console.log(n)
            that.animation.rotate(n).step()
            that.setData({
              lotteryAnimation: that.animation.export()
            })
          }, 10)


          setTimeout(function(){
            wx.showToast({
              title: res.data.list[0],
              icon: 'none'
            })
          },3500)
          
        }
        
      }
    })
    
    
  },
  light() { //跑马灯的绘制
    let that = this;
    let itemsNum = that.data.text.length;
    lamp++;
    if (lamp >= 2) {
      lamp = 0
    }
    ctx2.beginPath();
    ctx2.arc(w2, h2, w2, 0, 2 * Math.PI);//绘制底色为红色的圆形
    ctx2.setFillStyle("#6f00ff");
    ctx2.fill();
    ctx2.beginPath();
    ctx2.arc(w2, h2, w2 - 15, 0, 2 * Math.PI);//绘制底色为深黄的圆形
    ctx2.setFillStyle("#fe5e15");
    ctx2.fill();
    for (let i = 0; i < itemsNum * 2; i++) {//跑马灯小圆圈比大圆盘等分数量多一倍。
      ctx2.save();
      ctx2.beginPath();
      ctx2.translate(w2, h2);
      ctx2.rotate(30 * i * Math.PI / 180);
      ctx2.arc(0, w2 - 15, 8, 0, 2 * Math.PI);//绘制坐标为(0,-135)的圆形跑马灯小圆圈。

      //跑马灯第一次闪烁时与第二次闪烁时绘制相反的颜色，再配上定时器循环闪烁就可以达到跑马灯一闪一闪的效果了。

      if (lamp == 0) { //第一次闪烁时偶数奇数的跑马灯各绘制一种颜色
        if (i % 2 == 0) {
          ctx2.setFillStyle("#FBF1A9");
        } else {
          ctx2.setFillStyle("#1AAD19");
        }
      } else { //第二次闪烁时偶数奇数的跑马灯颜色对调。
        if (i % 2 == 0) {
          ctx2.setFillStyle("#1AAD19");
        } else {
          ctx2.setFillStyle("#FBF1A9");
        }
      }
      ctx2.fill();
      ctx2.restore();//恢复之前保存的上下文，可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖，
    }
    ctx2.draw(true,function(){
      setTimeout(function () {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: w2 * 2,
          height: h2 * 2,
          destWidth: 600,
          destHeight: 600,
          canvasId: 'bgCanvas',
          success(res) {
            that.setData({
              lotterBg: res.tempFilePath,
              canvasBgShow: true,
            })
          },
        })
      }, 100)
    });

  },

  Items(e) {
    let that = this;
    let itemsArc = e;//每一份扇形的角度
    let num = that.data.text.length;//等分数量
    let text = that.data.text;//放文字的数组
    for (let i = 0; i < num; i++) {
      ctx.beginPath();
      ctx.moveTo(w1, h1);
      //绘制扇形，注意下一个扇形比上一个扇形多一个itemsArc的角度。
      ctx.arc(w1, h1, w1 - 5, itemsArc * i * Math.PI / 180 - Math.PI / 2, (itemsArc + itemsArc * i) * Math.PI / 180 - Math.PI / 2);
      ctx.closePath();
      //绘制偶数扇形和奇数扇形的颜色不同
      if (i % 2 == 0) {
        ctx.setFillStyle(that.data.color[0]);
      } else {
        ctx.setFillStyle(that.data.color[1]);
      }
      ctx.fill();
      ctx.save();
      ctx.beginPath();
      ctx.setFontSize(12);//设置文字字号大小
      ctx.setFillStyle("#000");//设置文字颜色
      ctx.setTextAlign("center");//使文字垂直居中显示
      ctx.setTextBaseline("middle");//使文字水平居中显示
      ctx.translate(w1, h1);//将原点移至圆形圆心位置
      //旋转文字，从 i+2 开始，因为扇形是从数学意义上的第四象限第一个开始的，文字目前的位置是在圆心正上方，所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
      ctx.rotate((itemsArc * (i)) * Math.PI / 180 + itemsArc / 2 * Math.PI / 180);
      ctx.fillText(text[i], 0, -(h1 * 0.8));
      ctx.restore();//保存绘图上下文，使上一个绘制的扇形保存住。
    }
    ctx.draw(true, function () {
      setTimeout(function(){
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: w1 * 2,
          height: h1 * 2,
          destWidth: 500,
          destHeight: 500,
          canvasId: 'canvasI',
          success(res) {
            that.setData({
              canvasImg: res.tempFilePath,
              canvasImgShow: true,
            })
          },
        })
      },100)
    });
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    var that = this;
    clearInterval(that.data.timer)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

})